<template>
  <div>
    <!-- 交换历史 表格组件 -->
    <el-table :data="tableData" tooltip-effect="dark" style="width: 100%">
      <!-- 表格列定义 -->
      <el-table-column
        prop="taskName"
        label="任务名称"
        :show-overflow-tooltip="true"
        align="center"
      ></el-table-column>
      <el-table-column label="信息项数量" align="center">
        <template slot-scope="scope">
          <el-popover placement="bottom" trigger="hover">
            <el-table
              :data="scope.row.column || []"
              max-height="400px"
              size="medium"
              border
            >
              <el-table-column
                show-overflow-tooltip
                prop="name"
                label="信息项名称"
                width="180"
              >
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="enName"
                label="信息项英文名"
                width="180"
              >
              </el-table-column>
              <el-table-column prop="type" label="数据类型" width="100">
              </el-table-column>
              <el-table-column prop="exchange" label="数据长度" width="120">
              </el-table-column>
            </el-table>
            <span slot="reference">{{
              scope.row.column ? scope.row.column.length : "0"
            }}</span>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="destinationSite"
        label="接收地址"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        prop="destinationTableName"
        label="目标表/文件"
        align="center"
      ></el-table-column>
      <el-table-column label="执行结果" align="center">
        <template slot-scope="scope"> 成功 </template>
      </el-table-column>
      <el-table-column
        prop="totalRows"
        label="交换数据量"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="startTime"
        label="开始时间"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="endTime"
        label="结束时间"
        width="150"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getTaskExecHistory } from "@/utils/httpUtils";
export default {
  props: {
    apiCode: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      tableData: [],
      newApiCode: "",
    };
  },
  watch: {
    apiCode(newValue) {
      this.newApiCode = newValue;
      console.log("apiCode", this.newApiCode);
      this.getList();
    },
  },
  methods: {
    getList() {
      getTaskExecHistory({
        pageNo: 1,
        pageSize: 15,
        loadTableId: this.newApiCode,
      }).then((res) => {
        if (
          Array.isArray(res.data.totalList) &&
          res.data.totalList.length > 0
        ) {
          this.tableData = [res.data.totalList[0]];
        } else {
          this.tableData = []; // 或者你想要的默认值
        }
      });
    },
  },
};
</script>